<template>
  <div>
    <el-upload :show-file-list="false" :before-upload="beforeUpload" :on-success="onSuccess" :on-error="onError"
      :disabled="importDisabled" style="display: inline-flex;margin-right: 10px;"
      action="http://localhost:8150/book/tsg/uploadEasyExcl">
      <el-button size="small" :disabled="importDisabled" type="success" :icon="importDataIcon">
        {{importDataText}}
      </el-button>
    </el-upload>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                // 导入按钮的文本
                importDataText: '导入数据',
                // 导入按钮的图标
                importDataIcon: 'el-icon-upload2',
                // 导入按钮是否被禁用
                importDisabled: false
            }
        },

        methods: {
            // 导入文件失败后回调
            onError() {
                this.importDataText = '导入数据';
                this.importDataIcon = 'el-icon-upload2';
                this.importDisabled = false;

                this.$message.success("导入失败！");
            },
            // 导入文件成功后回调
            onSuccess() {
                // 成功后文本修改为原来的导入数据
                this.importDataText = '导入数据';
                // 图标修改
                this.importDataIcon = 'el-icon-upload2';
                // 将上传组件改为允许使用
                this.importDisabled = false;
                // 调用刷新数据的方法

                // message 弹出消息
                this.$message.success("导入成功！");

                this.$emit("excelchange", "你好")

            },
            // 上传文件调用
            beforeUpload() {
                // 将文本修改为正在导入
                this.importDataText = '正在导入';
                // 修改其图标
                this.importDataIcon = 'el-icon-loading';
                // 将其上传组件暂时禁用
                this.importDisabled = true;
            }

        },
    }
</script>
